<template>
	<div class="app-container editcss">
		<el-row :gutter="0" class="el-card is-always-shadow el-card__body  card_contents" style="padding: 0px;">
			<el-col class="title_tops">
				<div class="title_tops_t">
					<div class="title_top_E">Employee Information Editor</div>
					<div class="title_top_C">{{ id == 0 ? '新建' : '编辑' }}统计权限</div>
				</div>
				<div class="title_tops_b" @click="tabGo">
					<img src="../../assets/iconfont/arrow-left-circle.png" alt="" srcset="">
					<span>返回统计权限管理</span>
				</div>
			</el-col>
			<el-col class="dialog_title_ch_conter_operate  card_contents_tex">
				<div class="dialog_title_ch_conter">
					<div class="dialog_title_ch_conter_left">
						<img :src="addFrom.staffAvatarUrl" alt="" srcset="">
						<div class="quan" :class="addFrom.status==1? 'off_line' : 'on_line'"></div>
					</div>
					<div class="dialog_title_ch_conter_right">
						<el-row>
							<div class="postTitle">{{addFrom.staffName}}</div>
							<div class="postTitle_conter">
								<div class="postTitle_conter_item">
									<div class="postTitle_conter_itemspan">
										<span class="postTitle_conter_itemspan1">所属机构：</span>
										<span class="postTitle_conter_itemspan2">{{addFrom.hospitalName}}</span>
									</div>
									<div class="postTitle_conter_itemspan">
										<span class="postTitle_conter_itemspan1">医护类型：</span>
										<span class="postTitle_conter_itemspan2">{{addFrom.typeName}}</span>
									</div>
									<div class="postTitle_conter_itemspan">
										<span class="postTitle_conter_itemspan1">医护职称：</span>
										<span class="postTitle_conter_itemspan2">{{addFrom.titleName}}</span>
									</div>
									<div class="postTitle_conter_itemspan">
										<span class="postTitle_conter_itemspan1">所在科室：</span>
										<span class="postTitle_conter_itemspan2">{{addFrom.deptName}}</span>
									</div>
									<div class="postTitle_conter_itemspan">
										<span class="postTitle_conter_itemspan1">等级权限：</span>
										<span class="postTitle_conter_itemspan2">{{addFrom.permissionName}}</span>
									</div>
									<div class="postTitle_conter_itemspan">
										<span class="postTitle_conter_itemspan1">联系电话：</span>
										<span class="postTitle_conter_itemspan2">{{addFrom.phone}}</span>
									</div>
									<!-- <div class="postTitle_conter_itemspan">
                    <span class="postTitle_conter_itemspan1">微信号：</span>
                    <span class="postTitle_conter_itemspan2">{{}}</span>
                  </div> -->
									<div class="postTitle_conter_itemspan">
										<span class="postTitle_conter_itemspan1">创建时间：</span>
										<span
											class="postTitle_conter_itemspan2">{{ parseTime(addFrom.createTime, '{y}.{m}.{d}') }}</span>
									</div>
								</div>
							</div>
						</el-row>
						<el-row class="authority_bottom">
							<div class="content_checkbox">
								<div class="title_che">小程序权限：</div>
								<div class="authority" >
								  <el-checkbox-group v-model="checkList">
									<el-checkbox v-for="(v, i) in checkDataL" :key="i" :label="v.appletId">{{ v.appletMenuName }}</el-checkbox>
								  </el-checkbox-group>
								</div>
						  </div>
							<construction title="关联机构" @addition="additions" class="relevance" :btn='true' />
						</el-row>
					</div>
				</div>
			</el-col>
			<el-col class="card_contents_footer">
				<el-button type="primary" class="ch_button_seav" @click="submit">
					<img class="ch_button_img_seav" src="../../assets/iconfont/icon-seavicon.png" alt="" srcset="">
					<div>提交</div>
				</el-button>
			</el-col>
		</el-row>
		<el-dialog id="relevanceHeld" custom-class="eldialogCH" :modal='true' :visible.sync="relevanceHeld" center>
			<div slot="title" class="dialog_title_ch">
				<div>
					<div class="dialog_title_ch_subheading">
						Add Associated Service Provider
					</div>
					<div class="dialog_title_ch_subhead">
						添加关联机构
					</div>
				</div>
			</div>
			<div class="dialog_title_ch_conter">
				<div class="screen_case_amount screen_caseMD">
					<span class="screen_case_amount_lable">机构数量：</span>
					<span class="screen_case_amount_value">{{total}}</span>
				</div>
				<screenSelect title="机构名称" type='input' v-model="queryFrom.hospitalName"
					:isValue='queryFrom.hospitalName' placeholder="请输入机构名称"
					@transfer="valueHeld($event, 'hospitalName')" width="159px" class="screen_caseMD" />
				<screenSelect title="机构地区" type='select' v-model="queryFrom.province" :isValue='queryFrom.province'
					placeholder="请选择省" @transfer="valueHeld($event, 'province')" :options="ProvinceList" width="125px"
					class="screen_caseMD" />
				<screenSelect title="" type='select' v-model="queryFrom.city" :isValue='queryFrom.city' placeholder="请选择市"
				  @transfer="valueHeld($event, 'city')" :options="CityList" width="125px"/>
				<screenSelect title="" type='select' v-model="queryFrom.areas" :isValue='queryFrom.areas'
				  placeholder="请选择区" @transfer="valueHeld($event, 'areas')" :options="AreaList" width="125px"/>
				<el-button type="primary" class="ch_button screen_caseMD" @click="search">
					<img class="ch_button_img" src="../../assets/iconfont/zoom-out.png" alt="" srcset="">
					<div>搜索</div>
				</el-button>
				<el-button type="primary" class="ch_button screen_caseMD" @click="reset">
					<img class="ch_button_img" src="../../assets/iconfont/rotate-ccw.png" alt="" srcset="">
					<div>选项重置</div>
				</el-button>

			</div>
			<div class="dialog_title_ch_conter_table">
				<el-table :data="tableData" v-loading="loadingDis" max-height='357' style="width: 100%" header-row-class-name="hrcn"
					row-class-name="rcn">
					<el-table-column label="机构名称" align="center">
						<template slot-scope="scope">
							{{ scope.row.hospitalName }}
						</template>
					</el-table-column>
					<el-table-column label="机构联系人" align="center">
						<template slot-scope="scope">
							{{ scope.row.contacts }}
						</template>
					</el-table-column>
					<el-table-column label="联系电话" align="center">
						<template slot-scope="scope">
							{{ scope.row.contactsPhone }}
						</template>
					</el-table-column>
					<el-table-column label="所在地区" align="center">
						<template slot-scope="scope">
							{{ scope.row.hospitalLocated }}
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center">
						<template slot-scope="scope">
							<el-button :class="scope.row.isStatus == 0?'involve_AC':'involve'"
								@click="involveHeld(scope.row)">{{scope.row.isStatus == 0?'关联':'取消关联'}}</el-button>
						</template>
					</el-table-column>
					<el-table-column fixed="right" align="center" label="" width="1">
					  </el-table-column>
				</el-table>
				<div class="paginationblock" v-if="total > 0">
				    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				      :current-page="pageData.pageNo" :page-sizes="[10, 20, 30, 40]" :page-size="pageData.pageSize"
				      :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total">
				    </el-pagination>
				  </div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import construction from '@/components/construction/index.vue'
	import screenSelect from '@/components/screenSelect/index.vue'
	import smallCard from '@/components/smallCard/index.vue'
	import { getProvince, getCity, getArea } from '@/api/common'
	import {
		getStaffDetail,getStaffAdd,getStatisticalMenuList
	} from '@/api/statistical.js'
	import {
		getHospitaPagelList
	} from '@/api/organizational.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		name: "Field",
		components: {
			construction,
			screenSelect,
			smallCard
		},
		computed: {
			...mapGetters([
				'permissionList'
			])
		},
		watch: {
			'queryFrom.province': {
				handler(newVal, oldVal) {
					this.queryFrom.city = ''
					this.queryFrom.areas = ''
					if (newVal) {
						this.getCity()
					}
				}
			},
			'queryFrom.city': {
				handler(newVal, oldVal) {
					this.queryFrom.areas = ''
					if (newVal) {
						this.getArea()
					}
				}
			}
		},
		data() {
			return {
				loadingDis:true,
				relevanceHeld: false,
				editHeld: false,
				familyHeld: false,
				provinceName: '',
				institutionName: '',
				addFrom: {},
				id: 0,
				checkList: [],
				checkDataL: [],
				tableData: [],
				pageData: {
					pageNo: 1,
					pageSize: 10
				},
				total: 0,
				queryFrom: {
					province: '',
					city: '',
					areas: '',
					hospitalName: ''
				},
				ProvinceList: [],
				CityList: [],
				AreaList: [],
			};
		},
		mounted() {
			this.id = this.$route.params.id
			console.log(this.$route.params.id);
			this.getStaDetail()
			this.getProvince()
		},

		methods: {
			getProvince() {
				getProvince().then(res => {
					if (res.code == 200) {
						res.data.provinceList.map(item => {
							item.label = item.name
							item.value = item.id
						})
						this.ProvinceList = res.data.provinceList
					}
				})
			},
			getCity() {
				getCity(this.queryFrom.province).then(res => {
					if (res.code == 200) {
						res.data.cityList.map(item => {
							item.label = item.name
							item.value = item.id
						})
						this.CityList = res.data.cityList
					}
				})
			},
			getArea() {
				getArea(this.queryFrom.city).then(res => {
					if (res.code == 200) {
						res.data.areaList.map(item => {
							item.label = item.name
							item.value = item.id
						})
						this.AreaList = res.data.areaList
					}
				})
			},
			getStaDetail() {
				let that = this
				const loading = that.$loading({
					lock: true,
					text: 'Loading...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				getStaffDetail(this.$route.params.id).then(res => {
					if (res.code == 200) {
						this.addFrom = res.data.staff
						this.checkList = res.data.staff.appletIdList?res.data.staff.appletIdList:[]
						loading.close()
					}
				})
				getStatisticalMenuList().then(res=>{
					if(res.code==200){
						this.checkDataL = res.data.statisticalMenuList
					}
				})
			},
			tabGo() {
				this.$router.go(-1)
			},
			submit() {
				let newData = {}
				newData.hospitalIds = this.addFrom.hospitalIdList
				newData.statisticalName = this.addFrom.permissionName
				newData.userId = this.addFrom.staffId
				newData.appletIdList= this.checkList
				getStaffAdd(newData).then(res=>{
					if(res.code==200){
						this.$Toast('提交成功')
						this.tabGo()
					}else{
						this.$Toast(res.message)
					}
				})
				
			},
			search() {
				this.pageData={
					pageNo: 1,
					pageSize: 10
				}
				this.getRelevList()
			},
			reset() {
				this.queryFrom= {
					province: '',
					city: '',
					areas: '',
					hospitalName: ''
				}
				this.getRelevList()
			},
			additions() {
				this.relevanceHeld = true
				this.getRelevList()
				// this.$router.push({path:`/organizationaledit/0`})
			},
			handleSizeChange(val) {
			  this.pageData.pageSize = val
			  this.getRelevList()
			},
			handleCurrentChange(val) {
			  this.pageData.pageNo = val
			  this.getRelevList()
			},
			getRelevList() {
				let that = this
				getHospitaPagelList(this.queryFrom, this.pageData).then(res => {
					if (res.code == 200) {
						res.data.hospitalPage.records=res.data.hospitalPage.records.filter(item=>{
							if(that.addFrom.hospitalId!=item.hospitalId){
								return item
							}
						})
						console.log(that.addFrom);
						console.log(res.data.hospitalPage.records);
						
						res.data.hospitalPage.records.map(item=>{
							item.isStatus=0
							this.addFrom.hospitalIdList.map(v=>{
								if(item.hospitalId==v){
									item.isStatus = 1
								}
							})
						})
						
						that.tableData = res.data.hospitalPage.records
						this.total = res.data.hospitalPage.total-1
						this.loadingDis = false
					}
				})
			},
			involveHeld(row) {
				if (row.isStatus == 0) {
					row.isStatus = 1
				} else {
					row.isStatus = 0
				}
				if(this.addFrom.hospitalIdList.length==0){
					this.addFrom.hospitalIdList.push(row.hospitalId)
				}else{
					if(this.addFrom.hospitalIdList.some(x=>{return x==row.hospitalId})){
					this.addFrom.hospitalIdList.splice(this.addFrom.hospitalIdList.indexOf(row.hospitalId),1)	
					}else{
						this.addFrom.hospitalIdList.push(row.hospitalId)
					}
				}
			},
			valueHeld(childParam, fatherparam) {
				this.queryFrom[fatherparam] = childParam
			},
			multifunction(e, id) {
				this.keshi = e
				// this.$router.push({path:'administrative'})
			},
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.card_contents {
		height: calc(100% - 1px);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.card_contents_tex {
			flex: 1;
			overflow-y: auto;
			margin-bottom: 20px;
		}

		.card_contents_footer {
			padding: 16px 0;
			display: flex;
			align-items: center;
			justify-content: center;
			border-top: 1px solid #EFEFEF;
		}
	}

	.content_h {
		height: 149px;
		border-radius: 5px;
		padding: 0px;
	}

	.title_top {
		height: 79px;
		border-bottom: 1px solid #EFEFEF;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: 0 20px;
	}

	.title_tops {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 0 20px;
		height: 79px;
		border-bottom: 1px solid #EFEFEF;

		.title_tops_t {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.title_tops_b {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 28px;
			cursor: pointer;

			img {
				width: 24px;
				height: 24px;
				margin-right: 5px;
			}

			span {
				font-size: 16px;
				font-weight: 400;
				color: #000;
			}
		}
	}

	.screen_case_title {
		font-size: 16px;
		font-weight: 400;
		color: #000;
		margin-right: 35px;
	}

	.title_top_E {
		font-size: 12px;
		font-weight: 400;
		color: #9898989E;
	}

	.title_top_C {
		font-size: 18px;
		font-weight: 400;
		color: #000;
	}

	::v-deep .ch_button_seav {
		padding: 7px 27px;

		span {
			display: flex;
			align-items: center;
			justify-content: center;

			div {
				font-size: 16px;
				font-weight: 400;
				margin-left: 10px;
			}
		}
	}

	.ch_button_img_seav {
		width: 24px;
		height: 24px;
	}

	.ch_button_img {
		width: 16px;
		height: 16px;
	}

	/*
  编辑
  */
	.editHeld_conter_left {
		margin-right: 70px;
		text-align: center;
	}

	.editHeld_conter_right {
		flex: 1;

		.el-row {
			margin-bottom: 45px;
		}
	}

	::v-deep .editHeld_conter_left .avatar-uploader .el-upload {
		border: 1px solid #d9d9d9;
		border-radius: 50%;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		text-align: center;
	}

	// ::v-deep  .avatar-uploader .el-upload:hover {
	//   border-color: #409EFF;
	// }
	.editHeld_conter_left .avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 80px;
		height: 80px;
		line-height: 80px;
		text-align: center;
	}

	.editHeld_conter_left .avatar {
		width: 80px;
		height: 80px;
		display: block;
		position: relative;

		img {
			width: 100%;
			height: 100%;
		}

		div {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #00000066;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 18px;
			font-weight: 400;
			color: #FFFFFFAA;
		}
	}

	.dialog_title_ch_conter_operate {
		padding: 24px 35px;
		// border: 1px solid #EBEBEB;
		border-radius: 2px;
		display: flex;

		// align-items: center;
		.dialog_title_ch_conter {
			padding: 24px 35px;
			// border: 1px solid #EBEBEB;
			border-radius: 2px;
			display: flex;
			// align-items: center;

			.dialog_title_ch_conter_left {
				position: relative;
				width: 80px;
				height: 80px;
				margin-right: 33px;

				img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					overflow: hidden;
				}

				.quan {
					position: absolute;
					bottom: 0;
					right: 0;
					border: 2px solid #FFFFFF;
					width: 20px;
					height: 20px;
					border-radius: 100%;
				}
			}

			.dialog_title_ch_conter_right {
				flex: 1;
			}

			.postTitle {
				font-size: 20px;
				font-weight: 400;
				margin-bottom: 8px;
				color: #000;
			}

			.postTitle_conter {
				display: flex;
				// align-items: center;
				justify-content: space-between;

				.postTitle_conter_item {
					flex: auto;

					.postTitle_conter_itemspan {
						margin: 8px 0;
						display: inline-block;
						margin-right: 49px;

						.postTitle_conter_itemspan1 {
							font-size: 15px;
							font-weight: 400;
							color: #989898;
						}

						.postTitle_conter_itemspan2 {
							font-size: 16px;
							font-weight: 400;
							color: #000;
						}
					}
				}
			}
		}
	}



	.on_line {
		background-color: #19CDA6;
	}

	.off_line {
		background-color: #FE294D;
	}

	.authority_bottom {
		max-height: 300px;
		margin-top: 20px;
		overflow-y: auto;

		.content_checkbox {
			.title_che {
				margin-top: 20px;
				margin-bottom: 10px;
				font-size: 15px;
				font-weight: 400;
				color: #989898;
			}

			.title_che_sup {
				font-size: 13px;
				font-weight: 400;
				color: #414141;
			}

			.el-checkbox {
				margin-top: 8px;
			}

			.authority {
				margin-bottom: 25px;
			}
		}
	}

	.relevance {
		margin: 0;
		padding: 7px;
		background-color: #0584FE;
		width: 100px;
		border-radius: 1px;
	}

	#relevanceHeld {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	::v-deep #relevanceHeld .eldialogCH {
		border-radius: 6px;
		max-width: 1268px;
		width: 70%;
		margin-top: 0 !important;

		// 自定义弹窗x号
		.el-dialog__close::before {
			content: ' ';
			background: url(../../assets/iconfont/x-circle.png);
			background-size: 20px 20px;
			width: 20px;
			height: 20px;
			display: flex;
		}

		.el-dialog__close:active::before {
			background: url(../../assets/iconfont/x-circleactive.png);
			background-size: 20px 20px;
		}

		.dialog_title_ch_conter {
			padding: 24px 23px;
			border: 1px solid #EBEBEB;
			border-radius: 2px;
			display: flex;
			flex-wrap: wrap;

			// align-items: center;
			.dialog_title_ch_conter_left {
				position: relative;
				width: 80px;
				height: 80px;
				margin-right: 33px;

				img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					overflow: hidden;
				}

				.quan {
					position: absolute;
					bottom: 0;
					right: 0;
					border: 2px solid #FFFFFF;
					width: 20px;
					height: 20px;
					border-radius: 100%;
				}
			}


			.dialog_title_ch_conter_right {
				flex: 1;
			}

			.postTitle {
				font-size: 20px;
				font-weight: 400;
				margin-bottom: 8px;
				color: #000;
			}

			.postTitle_conter {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.postTitle_conter_item {
					flex: 1;

					.postTitle_conter_itemspan {
						margin: 8px 0;

						.postTitle_conter_itemspan1 {
							font-size: 15px;
							font-weight: 400;
							color: #989898;
						}

						.postTitle_conter_itemspan2 {
							font-size: 16px;
							font-weight: 400;
							color: #000;
						}
					}
				}
			}
		}

		.screen_case_amount {
			margin-right: 82px;

			.screen_case_amount_lable {
				font-size: 15px;
				color: #989898;
			}

			.screen_case_amount_value {
				font-size: 16px;
				color: #000;
			}
		}

	}

	::v-deep .el-button.ch_button {
		padding: 8px 9px;
	}

	::v-deep .el-button.ch_button span {
		display: flex;
		align-items: center;

		div {
			font-size: 13px;
			font-weight: 400;
			margin-left: 4px;
		}
	}

	::v-deep .ch_button_seav {
		padding: 7px 27px;

		span {
			display: flex;
			align-items: center;
			justify-content: center;

			div {
				font-size: 16px;
				font-weight: 400;
				margin-left: 10px;
			}
		}

	}

	::v-deep #relevanceHeld .el-dialog__header {
		padding: 0 !important;
		text-align: left;
	}

	::v-deep #relevanceHeld .el-dialog__body {
		padding: 17px 20px;
	}

	.dialog_title_ch {
		border-bottom: 1px solid #EFEFEF;
		padding: 25px 21px 13px 21px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.dialog_title_ch_subheading {
		font-size: 12px;
		font-weight: 400;
		color: #9898989E;
	}

	.dialog_title_ch_subhead {
		font-size: 18px;
		font-weight: 400;
		color: #000;
	}



	.dialog_title_ch_conter_table {
		margin-top: 16px;
		border: 1px solid #EFEFEF;
		border-radius: 2px;
	}

	//表格
	::v-deep .hrcn th {
		background-color: #FFFFFF;
		color: #989898;
		font-size: 15px;
		font-weight: 400;
	}

	::v-deep .hrcn th .cell {
		border-right: 1px solid #EFEFEF;
	}

	::v-deep .hrcn th:last-child .cell {
		border-right: none;
	}

	::v-deep .rcn {
		color: #000;
		font-size: 16px;
		font-weight: 400;
	}

	.userimg_b {
		width: 48px;
		height: 48px;
	}

	.status_cl {
		width: 17px;
		height: 17px;
		border-radius: 100%;
		display: inline-block;
	}

	.on_linebg {
		background: url(../../assets/iconfont/zaixian.png);
		background-size: 100% 100%;
	}

	.off_linebg {
		background: url(../../assets/iconfont/lixian.png);
		background-size: 100% 100%;
	}

	::v-deep .dialog_title_ch_conter_table .el-table__body-wrapper {
		height: calc(100% - 50px);
	}

	::v-deep .involve {
		background-color: #FE294D;
		border-color: #FE294D;
		color: #FFFFFF;
		font-size: 14px;
		width: 73px;
		height: 30px;
		padding: 5px 0;
	}

	::v-deep .involve_AC {
		background-color: #0584FE;
		border-color: #0584FE;
		color: #FFFFFF;
		font-size: 14px;
		width: 73px;
		height: 30px;
		padding: 5px 0;
	}
	::v-deep .el-table__body tr.hover-row.current-row>td,::v-deep .el-table__body tr.hover-row.el-table__row--striped.current-row>td,::v-deep .el-table__body tr.hover-row.el-table__row--striped>td,::v-deep .el-table__body tr.hover-row>td{
	     background-color:#dbdbdb;
	 }
</style>